<template>
  <div class="login-main">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="ruleForm">
      <h2 style="text-align: center; margin-bottom: 20px; color: #fff">管理后台</h2>
      <el-form-item prop="user">
        <el-input :prefix-icon="User" v-model="ruleForm.user" clearable />
      </el-form-item>
      <el-form-item prop="pass">
        <el-input :prefix-icon="Lock" v-model="ruleForm.pass" type="password" />
      </el-form-item>
      <el-form-item prop="code">
        <el-input :prefix-icon="Lock" v-model="ruleForm.code" class="code-value" />
        <img
          :src="img.imgSrc"
          alt=""
          class="code-img"
          :style="{ background: backColor }"
          @click="
            () => {
              img = useCaptcha()
              backColor = randomColor()
            }
          "
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { randomColor, useCaptcha } from '../utils/index' // 小方法
import { userLoginApi } from '@/api/loginApi'
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
let img = ref<any>(useCaptcha())
let backColor = ref<any>(randomColor())
const ruleForm = reactive({
  user: 'liyi',
  pass: '123456',
  code: ''
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    callback()
  }
}
const validateUser = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('用户名不能为空'))
  } else {
    callback()
  }
}
const validateCode = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('验证码不能为空'))
  } else if (value !== img.value.value) {
    callback(new Error('验证码不正确'))
  } else {
    callback()
  }
}

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  user: [{ validator: validateUser, trigger: 'blur' }],
  code: [{ validator: validateCode, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      localStorage.setItem('token', '23456ghjshgfdr')
      router.push({ path: '/' })
      userLoginApi(ruleForm).then(({ data }) => {
        console.log(data)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
onMounted(() => {
  useCaptcha()
})
</script>

<style lang="scss" scoped>
.login-main {
  display: flex;
  padding: 25px;
  height: 100%;
  // background: url('https://images.unsplash.com/photo-1564737956548-df7b58e61146?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') 100% no-repeat;
  // background-size: 100% 100%;
  background-image: linear-gradient(
    159deg,
    var(--background-color-main),
    var(--button-disabled-bg-color)
  );
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(22px);
    background: rgba(49, 80, 125, 0.04);
  }
  .el-input {
    width: 100%;
  }
  .ruleForm {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: 420px;
    border: 1px solid rgba(49, 80, 125, 0.3);
    background: rgba(49, 80, 125, 0.04);
    border-radius: 16px;
    box-shadow:
      rgba(74, 79, 97, 0.25) 0px 13px 27px -5px,
      rgba(74, 79, 97, 0.3) 0px 8px 16px -8px;
    padding: 20px 35px 35px 35px;
    backdrop-filter: blur(32px);
    transform: translate(-50%, -50%);

    .code-value {
      width: 250px;
    }

    .code-img {
      margin-left: 10px;
      width: 75px;
      height: 30px;
      border-radius: 4px;
    }
  }
}
</style>
